<template>
  <div class="create-business">
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="showDialog"
    >
      创建业务
    </el-button>
    <!-- 弹窗 -->
    <el-dialog title="创建业务" v-bind="$attrs" width="1050px" :visible.sync="dialogFormVisible">
      <div class="container">
        <div class="left">
          <el-steps
            :active="active"
            direction="vertical"
            style="height:550px;"
            finish-status="success"
          >
            <el-step title="基础配置" />
            <el-step title="业务配置" />
            <el-step title="联动配置" />
            <el-step title="数据报告" />
            <el-step title="完成" />
          </el-steps>
        </div>

        <div class="right">
          <!-- 基础配置 -->
          <el-form v-if="active == 0" label-width="100px" class="demo-ruleForm" size="mini">
            <el-form-item>
              <p>基础配置</p>
            </el-form-item>
            <el-form-item class="required" label="业务名称：" prop="name">
              <el-input v-model="buName" placeholder="请输入" maxlength="10" />
            </el-form-item>
            <el-form-item class="required" label="业务类型：" prop="name">
              <el-select v-model="buTypeValue" placeholder="请选择">
                <el-option
                  v-for="item in businessType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="required" label="数据系统：" prop="name">
              <el-checkbox
                v-for="item in buTypeSelectValue"
                :key="item.id"
                v-model="item.check"
                :label="item.name"
              />
            </el-form-item>

            <el-form-item class="required" label="业务级别：" prop="name">
              <el-select v-model="sortValue" placeholder="请选择">
                <el-option
                  v-for="item in sortData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item class="required" label="考核指标：" prop="name">
              <el-input :disabled="true" class="w200" placeholder="请点击右侧图标进行选择" />
              <span class="iconfont" @click="assessFlag = true">&#xe655;</span>
            </el-form-item>

            <el-form-item label="关联指标：" prop="name">
              <el-input
                :disabled="true"
                style="width: 90%"
                placeholder="请点击右侧图标进行选择"
              />
              <span
                class="iconfont"
                @click="relatingFlag = true"
              >&#xe655;</span>
            </el-form-item>
          </el-form>

          <!-- 业务配置 -->
          <el-form v-if="active == 1" label-width="100px" class="demo-ruleForm" size="mini">
            <el-form-item>
              <p>业务配置</p>
            </el-form-item>
            <el-button class="icon-plus" type="primary">
              <i class="el-icon-plus" @click="centerDialogVisible = true" />
              添加预警
            </el-button>
            <!-- <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
              <span>需要注意的是内容是默认不居中的</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>-->
            <el-form-item class="warning-msg">
              <el-button>一般预警</el-button>
              <i class="el-icon-close" />
            </el-form-item>
            <el-form-item class="ml" label="考核指标：" prop="name">
              <el-input
                style="width: 80%"
                placeholder="请点击右侧图标进行配置"
                :disabled="true"
              />
              <span
                class="iconfont"
                @click="warnConditionVisible"
              >&#xe655;</span>
            </el-form-item>
            <el-form-item class="ml" label="关联指标：" prop="name">
              <!-- <el-checkbox-group v-model="relatingValue"> -->
              <el-checkbox
                v-for="item in relatingValue"
                :key="item.name"
                v-model="item.check"
                :label="item.name"
              />
              <!-- </el-checkbox-group> -->
            </el-form-item>
            <el-form-item class="ml" label="短信模板：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标进行配置" :disabled="true" />
              <span class="iconfont" @click="smsFlag = true">&#xe655;</span>
            </el-form-item>
            <el-form-item class="ml" label="销项模板：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标进行配置" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item class="ml" label="整改建议：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标进行配置" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
          </el-form>
          <!-- 联动配置 -->
          <el-form v-if="active == 2" lab class="demo-ruleForm" size="mini">
            <!-- <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
              </el-col>
              <el-col class="line" :span="2">
                -
              </el-col>
              <el-col :span="11">
                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
              </el-col>
            </el-form-item>-->
            <el-form-item label="检查周期：" prop="name">
              <el-input style="width: 80%" placeholder="每天持续检查(默认)" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item class="required" label="联动工具" prop="name">
              <el-checkbox
                v-for="item in linkagetoolValue"
                :key="item.id"
                v-model="item.check"
                :label="item.name"
              />
            </el-form-item>
            <el-form-item class="warning-msg">
              <el-button>一般预警</el-button>
              <i class="el-icon-close" />
            </el-form-item>
            <el-form-item label="短信通知人：" prop="name">
              <el-input
                style="width: 80%"
                placeholder="请点击右侧图标选择人员"
                :disabled="true"
              />
              <span
                class="iconfont"
                @click="linkConfigVisble = true"
              >&#xe655;</span>
            </el-form-item>
            <el-form-item label="整改通知人：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标选择人员" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item prop="name">
              <el-form-item label="销项执行人：">
                <el-input style="width: 40%" placeholder="请点击右侧图标选择人员" :disabled="true" />
                <span class="iconfont">&#xe655;</span>
              </el-form-item>
              <el-form-item label="销项关注人：">
                <el-input style="width: 40%" placeholder="请点击右侧图标选择人员" :disabled="true" />
                <span class="iconfont">&#xe655;</span>
              </el-form-item>
            </el-form-item>
            <el-form-item class="warning-msg">
              <el-button>较大预警</el-button>
              <i class="el-icon-close" />
            </el-form-item>
            <el-form-item label="短信通知人：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标选择人员" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item label="整改通知人：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标选择人员" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item prop="name">
              <el-form-item label="销项执行人：">
                <el-input style="width: 40%" placeholder="请点击右侧图标选择人员" :disabled="true" />
                <span class="iconfont">&#xe655;</span>
              </el-form-item>
              <el-form-item label="销项关注人：">
                <el-input style="width: 40%" placeholder="请点击右侧图标选择人员" :disabled="true" />
                <span class="iconfont">&#xe655;</span>
              </el-form-item>
            </el-form-item>
            <el-form-item class="warning-msg">
              <el-button>重大预警</el-button>
              <i class="el-icon-close" />
            </el-form-item>
            <el-form-item label="短信通知人：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标选择人员" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item label="整改通知人：" prop="name">
              <el-input style="width: 80%" placeholder="请点击右侧图标选择人员" :disabled="true" />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item prop="name">
              <el-form-item label="销项执行人：">
                <el-input style="width: 40%" placeholder="请点击右侧图标选择人员" :disabled="true" />
                <span class="iconfont">&#xe655;</span>
              </el-form-item>
              <el-form-item label="销项关注人：">
                <el-input style="width: 40%" placeholder="请点击右侧图标选择人员" :disabled="true" />
                <span class="iconfont">&#xe655;</span>
              </el-form-item>
            </el-form-item>
          </el-form>

          <!-- 数据报告 -->
          <el-form
            v-if="active == 3"
            label-width="100px"
            class="demo-ruleForm data-report"
            size="mini"
          >
            <div class="data-report-header">
              <el-button type="info" size="mini" class="active">
                <i class="el-icon-check" /> 日报
              </el-button>
              <el-button type="info" size="mini">
                <i class="el-icon-check" /> 周报
              </el-button>
              <el-button
                type="info"
                size="mini"
                :disabled="true"
              >
                月报（未配置）
              </el-button>
              <el-button
                type="info"
                size="mini"
                :disabled="true"
              >
                季报（未配置）
              </el-button>
              <el-button
                type="info"
                size="mini"
                :disabled="true"
              >
                年报（未配置）
              </el-button>
            </div>

            <!-- :hide-required-asterisk="true" -->
            <el-form-item label="日报标题：" prop="name">
              <el-input size="small" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="日报通知人：" prop="name">
              <el-input size="small" :disabled="true" class="w260" placeholder="请点击右侧图标选择人员" />
              <i class="el-icon-edit ml10 mr10" @click="treeSelectVisible" />
              <el-checkbox />
              <span>周期结束次日</span>
              <!-- v-model="" -->
              <!-- year/month/date/week/ datetime/datetimerange/daterange -->
              <el-time-picker
                v-model="dateValue"
                class="w110 inlineB"
                :clearable="false"
                size="mini"
                type="datetime"
                placeholder="1"
              />
              <span>自动发送报告</span>
            </el-form-item>

            <el-card style="height: 610px;">
              <quill-editor
                ref="myQuillEditor"
                v-model="content"
                style="height: 500px;"
                :options="editorOption"
              >
                <!-- 自定义toolar -->
                <div id="toolbar" slot="toolbar">
                  <!-- Add a bold button -->
                  <button class="ql-bold" title="加粗">
                    Bold
                  </button>
                  <button class="ql-italic" title="斜体">
                    Italic
                  </button>
                  <button class="ql-underline" title="下划线">
                    underline
                  </button>
                  <button class="ql-strike" title="删除线">
                    strike
                  </button>
                  <button class="ql-blockquote" title="引用" />
                  <button class="ql-code-block" title="代码" />
                  <button class="ql-header" value="1" title="标题1" />
                  <button class="ql-header" value="2" title="标题2" />
                  <!--Add list -->
                  <button class="ql-list" value="ordered" title="有序列表" />
                  <button class="ql-list" value="bullet" title="无序列表" />
                  <!-- Add font size dropdown -->
                  <select class="ql-header" title="段落格式">
                    <option selected>
                      段落
                    </option>
                    <option value="1">
                      标题1
                    </option>
                    <option value="2">
                      标题2
                    </option>
                    <option value="3">
                      标题3
                    </option>
                    <option value="4">
                      标题4
                    </option>
                    <option value="5">
                      标题5
                    </option>
                    <option value="6">
                      标题6
                    </option>
                  </select>
                  <select class="ql-size" title="字体大小">
                    <option value="10px">
                      10px
                    </option>
                    <option value="12px">
                      12px
                    </option>
                    <option value="14px">
                      14px
                    </option>
                    <option value="16px" selected>
                      16px
                    </option>
                    <option value="18px">
                      18px
                    </option>
                    <option value="20px">
                      20px
                    </option>
                  </select>
                  <select class="ql-font" title="字体">
                    <option value="SimSun">
                      宋体
                    </option>
                    <option value="SimHei">
                      黑体
                    </option>
                    <option value="Microsoft-YaHei">
                      微软雅黑
                    </option>
                    <option value="KaiTi">
                      楷体
                    </option>
                    <option value="FangSong">
                      仿宋
                    </option>
                    <option value="Arial">
                      Arial
                    </option>
                  </select>
                  <!-- Add subscript and superscript buttons -->
                  <select class="ql-color" value="color" title="字体颜色" />
                  <select class="ql-background" value="background" title="背景颜色" />
                  <select class="ql-align" value="align" title="对齐" />
                  <button class="ql-clean" title="还原" />
                  <!-- You can also add your own -->
                </div>
              </quill-editor>
            </el-card>
          </el-form>
          <!-- 完成 -->
          <el-form v-if="active == 4" label-width="100px" class="demo-ruleForm">
            <el-form-item label="完成" prop="name">
              <el-input />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-if="success" slot="footer" class="dialog-footer">
        <el-button @click="pre">
          上一步
        </el-button>
        <el-button type="primary" @click="next">
          下一步
        </el-button>
      </div>
      <div v-else slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click=";(dialogFormVisible = false), (active = 0), (success = true)"
        >
          完成
        </el-button>
      </div>
      <!--  内层 选择人员 -->
      <!-- <warn-condition :visible.sync="warnConditionVisible" /> -->
      <!-- <link-config :visible.sync="linkConfigVisble" /> -->
      <sms-template :sms-visible="smsFlag" :on-submit="smsVisible" />
      <!-- <tree-select :visible.sync="treeSelectVisible" /> -->
      <!-- 内层 考核指标 -->
      <el-dialog title="选择考核指标" :visible.sync="assessFlag" width="490px" append-to-body>
        <div class="dia-assess">
          <el-input v-model="seachAssess" placeholder="请输入" style="width: 70%; text-align: center;">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <el-tree
            :props="assessProps"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          />
        </div>
        <div slot="footer">
          <el-button @click="assessFlag = false">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="assessFlag = false"
          >
            确 定
          </el-button>
        </div>
      </el-dialog>
      <!-- 内层关联指标 -->
      <el-dialog title="选择考核指标" :visible.sync="relatingFlag" width="490px" append-to-body>
        <div class="dia-assess">
          <el-input v-model="seachAssess" placeholder="请输入" style="width: 70%; text-align: center;">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <el-tree
            :props="assessProps"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          />
        </div>
        <div slot="footer">
          <el-button @click="relatingFlag = false">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="relatingFlag = false"
          >
            确 定
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import TreeSelect from './components/TreeSelect/index'
import SmsTemplate from './components/SmsTemplate/index'
import LinkConfig from './components/LinkConfig/index'
import warnCondition from './components/WarnCondition/index'
import { Quill, quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)

// 自定义字体类型
var fonts = [
  'SimSun',
  'SimHei',
  'Microsoft-YaHei',
  'KaiTi',
  'FangSong',
  'Arial',
  'Times-New-Roman',
  'sans-serif',
  '宋体',
  '黑体'
]
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
export default {
  name: 'FuncFormsEdit',
  components: {
    quillEditor,
    // eslint-disable-next-line vue/no-unused-components
    LinkConfig,
    SmsTemplate,
    // eslint-disable-next-line vue/no-unused-components
    TreeSelect,
    // eslint-disable-next-line vue/no-unused-components
    warnCondition
  },
  props: {
    deviceCodeDisabled: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    handleSubmit: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      smsFlag: false, // 父组件中的短信模板是否课件
      content: null,
      editorOption: {
        placeholder: '请输入',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: '#toolbar'
          }
        }
      },
      input: '',
      selfStyle: {
        color: 'red'
      },

      buName: '', // 业务名称
      buTypeSelectValue: [
        // 业务类型选择数据
        {
          id: 1,
          name: '凤凰慧',
          check: false
        },
        {
          id: 2,
          name: 'iRBA',
          check: false
        },
        {
          id: 3,
          name: '集成平台',
          check: false
        },
        {
          id: 4,
          name: 'ERP',
          check: false
        },
        {
          id: 5,
          name: 'CRM',
          check: false
        },
        {
          id: 6,
          name: '碧拓系统',
          check: false
        },
        {
          id: 7,
          name: 'AHR',
          check: false
        },
        {
          id: 8,
          name: '合同系统',
          check: false
        },
        {
          id: 9,
          name: '采购系统',
          check: false
        },
        {
          id: 10,
          name: '云仓',
          check: false
        },
        {
          id: 11,
          name: '社区增值系统',
          check: false
        }
      ],
      linkagetoolValue: [
        {
          id: 1,
          name: '凤凰芯app',
          check: false
        },
        {
          id: 2,
          name: '碧邦app',
          check: false
        },
        {
          id: 3,
          name: '大管家app',
          check: false
        }
      ],
      sortValue: '', // 业务级别，选中的
      sortData: [
        // 业务级别选项框
        {
          value: '选项总部级',
          label: '总部级'
        },
        {
          value: '选项区域级',
          label: '区域级'
        },
        {
          value: '选项项目级',
          label: '项目级'
        }
      ],

      // 第二个中
      relatingValue: [
        // 关联指标
        {
          id: 1,
          name: '业主满意度',
          check: false
        },
        {
          id: 2,
          name: '工单影响率',
          check: false
        }
      ],
      warnConditionVisible: false,
      treeSelectVisible: false,
      centerDialogVisible: false,
      smsTemplateVisble: false,
      linkConfigVisble: false,
      assessFlag: false, // 考核指标
      relatingFlag: false, // 关联指标
      seachAssess: '', // 关联指标搜索框
      assessProps: {
        //  关联指标 树形控件
        label: 'name',
        children: 'zones'
      },
      count: 1,

      active: 0,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      success: true,
      buTypeValue: '', // 业务类型,拿到的是数据中的value
      businessType: [
        // 业务类型，下拉中内容
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  },
  watch: {
    deviceCodeDisabled: {
      handler: function() {
        // this.renderFormItem = updateFormItem(this.deviceCodeDisabled);
      },
      immediate: true
    }
  },
  methods: {
    smsVisible(data) {
      this.smsFlag = data
    },
    handleCheckChange(data, checked, indeterminate) {
      // 树形控件的
      console.log(data, checked, indeterminate)
    },
    handleNodeClick(data) {
      // 树形控件的
      console.log(data)
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([
          {
            name: 'region1'
          },
          {
            name: 'region2'
          }
        ])
      }
      if (node.level > 3) return resolve([])

      var hasChild
      if (node.data.name === 'region1') {
        hasChild = true
      } else if (node.data.name === 'region2') {
        hasChild = false
      } else {
        hasChild = Math.random() > 0.5
      }

      setTimeout(() => {
        var data
        if (hasChild) {
          data = [
            {
              name: 'zone' + this.count++
            },
            {
              name: 'zone' + this.count++
            }
          ]
        } else {
          data = []
        }
        resolve(data)
      }, 500)
    },
    pre() {
      if (this.active === 0) return
      this.active--
    },
    next() {
      if (this.active++ > 2) {
        this.success = false
      }
    },
    showDialog() {
      console.log(1)
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import './createBusiness.scss';
@import './font.scss';
</style>
